<template>
  <!-- 编辑器功能区 -->
    <div style="z-index: 100">
        <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="data.mode"
        />
    </div>
  <!-- 正文内容 -->
    <Editor class="rich-text-editor-content"
            style="overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="data.mode"
            @onCreated="handleCreated"
            @onChange="handleEditorChange"
    />
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount, shallowRef } from 'vue'
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import {DomEditor} from "@wangeditor/editor";

const emit = defineEmits(['getContent'])
const getEditorContent = () => {
    // 从编辑器实例中获取内容
    return valueHtml.value
}
// 提供一个公共方法供父组件调用
const exposeContent = () => {
    emit('getContent', getEditorContent())
}
// 将方法暴露给父组件
defineExpose({
    exposeContent
})

const data = reactive ({
    mode: 'simple',
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p></p>')
// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        valueHtml.value = '<p></p>'
    }, 1500)
})

const toolbarConfig = {

}   // 工具栏配置
toolbarConfig.toolbarKeys = [
    // 菜单 key
    'headerSelect',
    // 分割线
    '|',
    // 菜单 key
    'bold',
    'italic',
    'uploadImage',
    // 菜单组，包含多个菜单
    {
        key: 'group-more-style', // 必填，要以 group 开头
        title: '更多样式', // 必填
        iconSvg: '<svg>....</svg>', // 可选
        menuKeys: ['through', 'code', 'clearStyle'], // 下级菜单 key ，必填
    },
]
const editorConfig = {
    placeholder: '准确的描述以便获得更好的回响...' ,
    MENU_CONF: {},   // 初始化 MENU_CONF 属性
}   // 编辑器配置
// 修改 uploadImage 菜单配置
editorConfig.MENU_CONF['uploadImage'] = {
    server: 'http://localhost:8000/api/uploadImage',  // 上传图片的服务器地址
    fieldName: 'file',  // 指定上传参数名，与后端接口一致
    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 1024 * 1024, // 1M
    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 5,
    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/*'],
    onBeforeUpload(file) {
        // file 选中的文件，格式如 { key: file }
        return file
    },
    // 自定义上传成功的回调函数，确保正确处理返回结果
    // 上传成功的回调
    onSuccess(files, result) {
        console.log('上传成功，后端返回:', result);
        // 检查后端返回格式是否正确
        if (result && result.errno === 0 && result.data && result.data.url) {
            // 正确格式：{ errno: 0, data: { url: "图片URL" } }
            return {
                errno: 0, // 必须返回0表示成功
                data: {
                    urls: [result.data.url] // 提取真正的图片URL
                }
            };
        } else {
            // 处理非预期格式
            console.error('后端返回格式异常:', result);
            return {
                errno: 1,
                message: '上传成功但返回格式错误'
            };
        }
    },

    // 自定义上传失败的回调函数
    onFailed(err, files, result) {
        console.log('上传的文件:', files);
        console.log('后端返回结果:', result);
        console.error('图片上传出错:', err);
    },
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // 获取工具栏实例
    const toolbar = DomEditor.getToolbar(editor);
    if (!toolbar) return;
    // 获取当前工具栏配置
    const toolbarConfig = toolbar.getConfig();
    console.log(toolbarConfig.toolbarKeys) // 当前菜单排序和分组
}
const handleEditorChange = () => {
    const editorElement = document.querySelector('.rich-text-editor-content');
    if (editorElement) {
        editorElement.scrollTop = editorElement.scrollHeight;
    }
}
</script>

<style scoped>
.rich-text-editor-content {
    min-height: 150px;
}
</style>